<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios基本使用</title>
</head>
<body>

<div id="app">
    <input @click="getJoke" type="button" value="获取笑话">
    <p>{{joke}}</p>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    /**
     * 接口: 随机获取一条笑话
     * 请求地址: https://autumnfish.cn/api/joke/
     * 请求方法: get
     * 相应内容: 随机笑话
     * 请求参数: 无
     */
    new Vue({
        el: "#app",
        data: {
            joke: "很好笑的笑话"
        },
        methods: {
            getJoke: function () {

                // 定义一个临时变量, 保存了this的引用地址
                var that = this;
                /**
                 * axios回调函数中的this已经改变, 无法访问到data中数据,
                 * console.log(this.joke) 就打印不出来 undefined
                 * #
                 * 把this保存到一个临时变量中, 回调函数中直接使用保存的this临时变量即可
                 * #
                 * 和本地应用的最大区别就是改变了数据来源
                 */
                axios.get("https://autumnfish.cn/api/joke/")
                    .then(function (response) {
                        console.log(response);
                        console.log(this.joke);
                        that.joke = response.data;
                    }, function (err) {

                    });
            }
        }
    })

</script>

</body>
</html>